<template>
  <div class="app-container">
    <div class="handle-content">
      <el-input v-if="this.$store.getters.role.store_id == 0" v-model="storeId" placeholder="请输入店铺id" style="width: 250px;">
        <el-button slot="append" @click="search">查询</el-button>
      </el-input>
      <span class="right">
        <el-button type="primary" @click="add">
          添加商品
        </el-button>
      </span>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
      <el-table-column label="商品名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="商品分类" align="center">
        <template slot-scope="scope">
          {{ scope.row.good_type }}
        </template>
      </el-table-column>
      <el-table-column v-if="this.$store.getters.role.store_id == 0" label="所属店铺" align="center">
        <template slot-scope="scope">
          {{ scope.row.store.title }}
        </template>
      </el-table-column>
      <el-table-column label="商品封面" align="center">
        <template slot-scope="scope">
          <div style="max-width: 250px;text-align: center;">
            <img :src="scope.row.cover" style="display: inline-block; width: 80%;">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品状态" align="center">
        <template slot-scope="scope">{{ scope.row.status_title }}</template>
      </el-table-column>
      <el-table-column label="排序比重" align="center">
        <template slot-scope="scope">
          {{ scope.row.sort }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="250">
        <template slot-scope="scope">
          <el-button title="编辑" type="primary" circle icon="el-icon-edit" @click="edit(scope.row.id)" />
          <el-button title="删除" type="danger" circle icon="el-icon-delete" @click="showDeleteModel(scope.row.id)" />
        </template>
      </el-table-column>
    </el-table>
    <pagination v-if="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList" />
    <dialog-model ref="dialog" @sure="deleteGood" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import DialogModel from '@/components/Dialog'
import { Message } from 'element-ui'
import { getList, deleteGood } from '@/api/good'
export default {

  components: { Pagination, DialogModel },

  data() {
    return {
      list: [],
      listLoading: false,
      listQuery: {
        page: 1,
        storeId: '',
        pageSize: 10
      },
      storeId: '',
      total: 0,
      deleteId: 0
    }
  },

  mounted() {
    this.getList()
  },

  methods: {
    getList() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },

    add() {
      this.$router.push({ path: '/good/handle?id=new' })
    },

    edit(id) {
      this.$router.push({ path: '/good/handle?id=' + id })
    },

    afterSave() {
      this.getList()
    },

    showDeleteModel(id) {
      this.deleteId = id
      this.$refs.dialog.showDialog('您确定要删除选中的商品?')
    },

    deleteGood() {
      deleteGood({ id: this.deleteId }).then(res => {
        Message({
          message: res.data.info,
          type: 'success',
          duration: 2000
        })
        this.getList()
      })
    },

    search() {
      this.listQuery.storeId = this.storeId
      this.listQuery.page = 1
      this.getList()
    }

  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-container{
    .handle-content{
        .right{
            float: right;
            margin-bottom: 20px;
        }
    }
}
</style>
